<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>豆瓣</title>
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div class="header">
        <div class="wrapper clearfix">
            <h1 class="logo">
                <a href=""></a>
            </h1>
            <div class="search">
                <form action="">
                    <input type="text" placeholder="书籍、电影、音乐、小组、小站、成员">
                    <span class="srh-btn"></span>
                </form>
            </div>
            <div class="nav-links">
                <ul class="clearfix">
                    <li>
                        <a target="_blank" href="" class="link-book"></a>
                    </li>
                    <li>
                        <a target="_blank" href="" class="link-movie"></a>
                    </li>
                    <li>
                        <a target="_blank" href="" class="link-music"></a>
                    </li>
                    <li>
                        <a target="_blank" href="" class="link-group"></a>
                    </li>
                    <li>
                        <a target="_blank" href="" class="link-events"></a>
                    </li>
                    <li>
                        <a target="_blank" href="" class="link-fm"></a>
                    </li>
                    <li>
                        <a target="_blank" href="" class="link-time"></a>
                    </li>
                    <li>
                        <a target="_blank" href="" class="link-market"></a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="login">
        <div class="wrapper clearfix">
            <div class="login-box-warp">
                <div class="login-box">
                    <div class="login-switch">
                        <div class="login-switch-icon">
                            <a href="javascript:;" class="static switch-icon hide"></a>
                            <a href="javascript:;" class="quick switch-icon"></a>
                        </div>
                    </div>

                    <!--标准登录-->
                    <div class="form static-form">
                        <div class="static-form-tabs">
                            <ul class="clearfix">
                                <li class="login-tab-code on">短信登录／注册</li>
                                <li class="login-tab-password">密码登录</li>
                            </ul>
                        </div>

                        <!--验证码登录-->
                        <form action="" class="code-form">
                            <div class="static-form-tips">
                                请仔细阅读
                                <a href="" target="_blank">豆瓣使用协议、隐私政策</a>
                            </div>
                            <div class="static-form-field field-phone">
                                <input type="text" placeholder="手机号">
                                <div class="area-code">
                                    <span class="selected">+86</span>
                                    <div class="area-choose" style="display: none">
                                        <div class="area-choose-box">
                                            <a href="#" class="area-choose-close">X</a>
                                            <h3 class="area-choose-title">选择国际区号</h3>
                                            <div class="area-code-list">
                                                <ul class="GlobalPhoneList">
                                                    <li class="active">
                                                        <span class="GlobalPhoneItem-district">中国大陆</span>
                                                        <span class="GlobalPhoneItem-number">+86</span>
                                                    </li>
                                                    <li>
                                                        <span class="GlobalPhoneItem-district">中国香港</span>
                                                        <span class="GlobalPhoneItem-number">+852</span>
                                                    </li>
                                                    <li>
                                                        <span class="GlobalPhoneItem-district">中国澳门</span>
                                                        <span class="GlobalPhoneItem-number">+853</span>
                                                    </li>
                                                    <li>
                                                        <span class="GlobalPhoneItem-district">中国台湾</span>
                                                        <span class="GlobalPhoneItem-number">+886</span>
                                                    </li>
                                                    <li>
                                                        <span class="GlobalPhoneItem-district">日本</span>
                                                        <span class="GlobalPhoneItem-number">+81</span>
                                                    </li>
                                                    <li>
                                                        <span class="GlobalPhoneItem-district">韩国</span>
                                                        <span class="GlobalPhoneItem-number">+82</span>
                                                    </li>
                                                    <li>
                                                        <span class="GlobalPhoneItem-district">新加坡</span>
                                                        <span class="GlobalPhoneItem-number">+65</span>
                                                    </li>
                                                    <li>
                                                        <span class="GlobalPhoneItem-district">中国澳门</span>
                                                        <span class="GlobalPhoneItem-number">+853</span>
                                                    </li>
                                                    <li>
                                                        <span class="GlobalPhoneItem-district">中国台湾</span>
                                                        <span class="GlobalPhoneItem-number">+886</span>
                                                    </li>
                                                    <li>
                                                        <span class="GlobalPhoneItem-district">日本</span>
                                                        <span class="GlobalPhoneItem-number">+81</span>
                                                    </li>
                                                    <li>
                                                        <span class="GlobalPhoneItem-district">韩国</span>
                                                        <span class="GlobalPhoneItem-number">+82</span>
                                                    </li>
                                                    <li>
                                                        <span class="GlobalPhoneItem-district">新加坡</span>
                                                        <span class="GlobalPhoneItem-number">+65</span>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="static-form-field field-codes">
                                <input type="text" placeholder="验证码">
                                <a href="" class="code">获取验证码</a>
                            </div>
                            <div class="static-form-submit">
                                <a href="" class="btn-phone">登录豆瓣</a>
                            </div>
                            <div class="static-form-ft clearfix">
                                <p class="static-form-remember">
                                    <label>
                                        <input type="checkbox">
                                        下次自动登录
                                    </label>
                                </p>
                                <p class="static-form-link">
                                    <a href="" class="help-link">收不到验证码</a>
                                </p>
                            </div>
                        </form>

                        <!--密码登录-->
                        <form action="" class="password-form" style="display: none">
                            <div class="static-form-tips t-right">
                                <a href="" target="_blank">找回密码</a>
                            </div>
                            <div class="static-form-field">
                                <input type="text" placeholder="手机号 / 邮箱">
                            </div>
                            <div class="static-form-field">
                                <input type="password" placeholder="密码">
                            </div>
                            <div class="static-form-submit">
                                <a href="" class="btn-phone">登录豆瓣</a>
                            </div>
                            <div class="static-form-ft clearfix">
                                <p class="static-form-remember">
                                    <label>
                                        <input type="checkbox">
                                        下次自动登录
                                    </label>
                                </p>
                                <p class="static-form-link">
                                    <a href="" class="help-link">海外手机登录</a>
                                </p>
                            </div>
                        </form>

                        <div class="static-form-3rd">
                            <span>第三方登录: </span>
                            <a href="" class="link-wx" title="用微信登录"></a>
                            <a href="" class="link-wb" title="用微博登录"></a>
                        </div>
                    </div>

                    <!--二维码登录-->
                    <div class="form quick-form" style="display: none">
                        <div class="quick-form-tabs">
                            <ul>
                                <li class="login-tab-scan">二维码登录</li>
                            </ul>
                        </div>
                        <div class="login-scan">
                            <img src="images/login-scan.png" alt="">
                            <span class="login-scan-text">请打开豆瓣客户端扫一扫</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="app">
                <p class="app-title">豆瓣
                    <span>6.0</span>
                </p>
                <a href="" class="app-link">下载豆瓣 App</a>
                <div class="app-qr">
                    <div class="app-qr-icon"></div>
                    <div class="app-qr-expand hide">
                        <img src="images/doubanapp_qrcode.png" alt="" width="160" height="160">
                        <p>iOS / Android 扫码直接下载</p>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <div class="content">
        <!-- 热点 -->
        <div class="section db-hot">
            <div class="wrapper clearfix">
                <div class="aside-right">
                    <div class="adv">
                        <a href="">
                            <img src="images/adv1.jpg" alt="">
                        </a>
                    </div>
                    <div class="mod">
                        <h3 class="mod-title">热门话题 · · · · · ·
                            <span>
                                (
                                <a href="" target="_self">去话题广场</a>
                                )
                            </span>
                        </h3>
                        <ul class="topics-list">
                            <li>
                                <a href="" class="topics-name">我最想复原的书中的一道菜</a>
                                <span class="topics-subtitle">新话题</span>
                            </li>
                            <li>
                                <a href="" class="topics-name">独居教给我的人生哲学</a>
                                <span class="topics-subtitle">1.1万次浏览</span>
                            </li>
                            <li>
                                <a href="" class="topics-name">被喵星人治愈的瞬间</a>
                                <span class="topics-subtitle">5.6万次浏览</span>
                            </li>
                            <li>
                                <a href="" class="topics-name">独居教给我的人生哲学</a>
                                <span class="topics-subtitle">1.1万次浏览</span>
                            </li>
                            <li>
                                <a href="" class="topics-name">成都街巷美食志</a>
                                <span class="topics-subtitle">154.2万次浏览</span>
                            </li>
                            <li>
                                <a href="" class="topics-name">你一生中再也吃不到的菜</a>
                                <span class="topics-subtitle">8337次浏览</span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="main">
                    <div class="mod clearfix">
                        <h3 class="mod-title">热门内容 · · · · · ·
                            <span>
                                (
                                <a href="" target="_self">更多</a>
                                )
                            </span>
                        </h3>
                        <div class="albums">
                            <ul>
                                <li>
                                    <div class="pic">
                                        <a href="">
                                            <img src="images/img2.webp" alt="">
                                        </a>
                                    </div>
                                    <a href="">折紙系列-氣球皮卡丘</a>
                                    <span class="num">15张照片</span>
                                </li>
                                <li>
                                    <div class="pic">
                                        <a href="">
                                            <img src="images/img1.webp" alt="">
                                        </a>
                                    </div>
                                    <a href="">新涂鸦</a>
                                    <span class="num">51张照片</span>
                                </li>
                                <li>
                                    <div class="pic">
                                        <a href="">
                                            <img src="images/img3.webp" alt="">
                                        </a>
                                    </div>
                                    <a href="">「墟墓之間」──法國</a>
                                    <span class="num">175张照片</span>
                                </li>
                                <li>
                                    <div class="pic">
                                        <a href="">
                                            <img src="images/img1.webp" alt="">
                                        </a>
                                    </div>
                                    <a href="">新涂鸦</a>
                                    <span class="num">51张照片</span>
                                </li>
                            </ul>
                        </div>
                        <div class="notes">
                            <ul>
                                <li class="first">
                                    <div class="note-title">
                                        <a href="">「20190916」沙溪写生（上）</a>
                                    </div>
                                    <div class="note-author">辛巴的日记</div>
                                    <p>在这个小镇写生真的感觉好好，镇子古朴安宁（其实有好多地方在改扩建，走近了很吵...</p>
                                </li>
                                <li>
                                    <a href="">拿90年前的杭州旅游手册重游杭州，会发生些什么事</a>
                                </li>
                                <li>
                                    <a href="">北岛 | 特朗斯特罗默（四）</a>
                                </li>
                                <li>
                                    <a href="">特殊的课堂</a>
                                </li>
                                <li>
                                    <a href="">我爱那棵树，它和我情同骨肉</a>
                                </li>
                                <li>
                                    <a href="">我国最大的古驿站，你可能也曾经路过</a>
                                </li>
                                <li>
                                    <a href="">观展日记丨忘忧草：女性时间考古</a>
                                </li>
                                <li>
                                    <a href="">裸辞生活不完全纪实（五）-----我在山里住了几天</a>
                                </li>
                                <li>
                                    <a href="">《圆桌派》替代不了《锵锵三人行》</a>
                                </li>
                                <li>
                                    <a href="">说谎</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 豆瓣时间 -->
        <div class="section db-time">
            <div class="wrapper clearfix">
                <div class="aside-left">
                    <h2 class="section-title">
                        <a href="">豆瓣时间</a>
                    </h2>
                </div>
                <div class="main">
                    <h3 class="mod-title">热门专栏 · · · · · ·
                        <span>
                                (
                                <a href="" target="_self">更多</a>
                                )
                            </span>
                    </h3>
                    <ul class="time-list">
                        <li>
                            <a href="" class="time-cover  video" target="_blank">
                                <img src="images/time-pic1.jpg" alt="">
                            </a>
                            <a href="" class="time-title" target="_blank">一看就懂的中国电影档期——电影专业必修课</a>
                            <span class="time-type">视频专栏</span>
                        </li>
                        <li>
                            <a href="" class="time-cover  audio" target="_blank">
                                <img src="images/time-pic2.jpg" alt="">
                            </a>
                            <a href="" class="time-title" target="_blank">伤别离与共春风——唐宋词的情感世界</a>
                            <span class="time-type">音频专栏</span>
                        </li>
                        <li>
                            <a href="" class="time-cover  video" target="_blank">
                                <img src="images/time-pic1.jpg" alt="">
                            </a>
                            <a href="" class="time-title" target="_blank">一看就懂的中国电影档期——电影专业必修课</a>
                            <span class="time-type">视频专栏</span>
                        </li>
                        <li>
                            <a href="" class="time-cover  audio" target="_blank">
                                <img src="images/time-pic2.jpg" alt="">
                            </a>
                            <a href="" class="time-title" target="_blank">伤别离与共春风——唐宋词的情感世界</a>
                            <span class="time-type">音频专栏</span>
                        </li>
                        <li>
                            <a href="" class="time-cover  video" target="_blank">
                                <img src="images/time-pic1.jpg" alt="">
                            </a>
                            <a href="" class="time-title" target="_blank">一看就懂的中国电影档期——电影专业必修课</a>
                            <span class="time-type">视频专栏</span>
                        </li>
                        <li>
                            <a href="" class="time-cover  audio" target="_blank">
                                <img src="images/time-pic2.jpg" alt="">
                            </a>
                            <a href="" class="time-title" target="_blank">伤别离与共春风——唐宋词的情感世界</a>
                            <span class="time-type">音频专栏</span>
                        </li>
                        <li>
                            <a href="" class="time-cover  video" target="_blank">
                                <img src="images/time-pic1.jpg" alt="">
                            </a>
                            <a href="" class="time-title" target="_blank">一看就懂的中国电影档期——电影专业必修课</a>
                            <span class="time-type">视频专栏</span>
                        </li>
                        <li>
                            <a href="" class="time-cover  audio" target="_blank">
                                <img src="images/time-pic2.jpg" alt="">
                            </a>
                            <a href="" class="time-title" target="_blank">伤别离与共春风——唐宋词的情感世界</a>
                            <span class="time-type">音频专栏</span>
                        </li>
                        <li>
                            <a href="" class="time-cover  video" target="_blank">
                                <img src="images/time-pic1.jpg" alt="">
                            </a>
                            <a href="" class="time-title" target="_blank">一看就懂的中国电影档期——电影专业必修课</a>
                            <span class="time-type">视频专栏</span>
                        </li>
                        <li>
                            <a href="" class="time-cover  audio" target="_blank">
                                <img src="images/time-pic2.jpg" alt="">
                            </a>
                            <a href="" class="time-title" target="_blank">伤别离与共春风——唐宋词的情感世界</a>
                            <span class="time-type">音频专栏</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 视频 -->
        <div class="section bd-video">
            <div class="wrapper clearfix">
                <div class="aside-left">
                    <h2 class="section-title">
                        <a href="">视频</a>
                    </h2>
                </div>
                <div class="main">
                    <a href="">
                        <h3 class="mod-title">瓣嘴  · · · · · ·</h3>
                    </a>
                    <ul class="video-list">
                        <li>
                            <a class="video-cover" href="">
                                <img src="images/video-img1.jpeg" alt="">
                            </a>
                            <a href="" class="video-title">姚晨忘带偶像包袱，展示十级搞笑功力</a>
                        </li>
                        <li>
                            <a class="video-cover" href="">
                                <img src="images/video-img2.jpg" alt="">
                            </a>
                            <a href="" class="video-title">陈坤公开三大bug，原来你是这样的厂花</a>
                        </li>
                        <li>
                            <a class="video-cover" href="">
                                <img src="images/video-img2.jpg" alt="">
                            </a>
                            <a href="" class="video-title">陈坤公开三大bug，原来你是这样的厂花</a>
                        </li>
                    </ul>
                    <a href="">
                        <h3 class="mod-title">观影会客厅  · · · · · ·</h3>
                    </a>
                    <ul class="video-list">
                        <li>
                            <a class="video-cover" href="">
                                <img src="images/video-img3.jpg" alt="">
                            </a>
                            <a href="" class="video-title">焦雄屏：把电影当做一种信仰</a>
                        </li>
                        <li>
                            <a class="video-cover" href="">
                                <img src="images/video-img4.jpg" alt="">
                            </a>
                            <a href="" class="video-title">汤姆·克鲁斯：对我来说，拍电影就是度假</a>
                        </li>
                        <li>
                            <a class="video-cover" href="">
                                <img src="images/video-img4.jpg" alt="">
                            </a>
                            <a href="" class="video-title">蔡明亮：创作有时候是一种命运的安排</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 豆瓣电影 -->
        <div class="section db-movie">
            <div class="wrapper clearfix">
                <div class="aside-left">
                    <h2 class="section-title">
                        <a href="">电影</a>
                    </h2>
                    <div class="links-nav">
                        <ul>
                            <li>
                                <a href="">影讯&购票</a>
                            </li>
                            <li>
                                <a href="" class="new">选电影</a>
                            </li>
                            <li>
                                <a href="">电视剧</a>
                            </li>
                            <li>
                                <a href="">排行榜</a>
                            </li>
                            <li>
                                <a href="">分类</a>
                            </li>
                            <li>
                                <a href="">影评</a>
                            </li>
                            <li>
                                <a href="">预告片</a>
                            </li>
                            <li>
                                <a href="">问答</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="aside-right">
                    <div class="mod">
                        <h3 class="mod-title">影片分类 · · · · · ·
                            <span>
                                (
                                <a href="" target="_self">更多</a>
                                )
                            </span>
                        </h3>
                        <ul class="tags-list">
                            <li><a href="">爱情</a></li>
                            <li><a href="">剧情</a></li>
                            <li><a href="">喜剧</a></li>
                            <li><a href="">动画</a></li>
                            <li><a href="">科幻</a></li>
                            <li><a href="">黑色幽默</a></li>
                            <li><a href="">战争</a></li>
                            <li><a href="">恐怖</a></li>
                            <li><a href="">励志</a></li>
                            <li><a href="">纪录片</a></li>
                            <li><a href="">文艺</a></li>
                            <li><a href="">搞笑</a></li>
                            <li><a href="">动作</a></li>
                        </ul>
                    </div>
                    <div class="mod">
                        <h3 class="mod-title">近期热门 · · · · · ·
                            <span>
                                (
                                <a href="" target="_self">更多</a>
                                )
                            </span>
                        </h3>
                        <ol class="movie-charts">
                            <li><a href="">小丑</a></li>
                            <li><a href="">银河补习班</a></li>
                            <li><a href="">保持沉默</a></li>
                            <li><a href="">安娜</a></li>
                            <li><a href="">寄生虫</a></li>
                            <li><a href="">极限逃生</a></li>
                            <li><a href="">沉默的证人</a></li>
                            <li><a href="">仲夏夜惊魂</a></li>
                            <li><a href="">柳烈的音乐专辑</a></li>
                            <li><a href="">龙牌之谜</a></li>
                        </ol>
                    </div>
                </div>
                <div class="main">
                    <h3 class="mod-title">正在热映 · · · · · ·
                        <span>
                                (
                                <a href="" target="_self">更多</a>
                                )
                            </span>
                    </h3>
                    <div class="movie-list list">
                        <ul>
                            <li>
                                <div class="pic">
                                    <a href="">
                                        <img src="images/movie-pic1.webp" alt="">
                                    </a>
                                </div>
                                <div class="title">
                                    <a href="">双子杀手</a>
                                </div>
                                <div class="rating">
                                    <span class="allstar35"></span>
                                    <i>6.8</i>
                                </div>
                                <a href="" class="link-btn btn-ticket">选座购票</a>
                            </li>
                            <li>
                                <div class="pic">
                                    <a href="">
                                        <img src="images/movie-pic2.webp" alt="">
                                    </a>
                                </div>
                                <div class="title">
                                    <a href="">我和我的祖国</a>
                                </div>
                                <div class="rating">
                                    <span class="allstar40"></span>
                                    <i>8.0</i>
                                </div>
                                <a href="" class="link-btn btn-ticket">选座购票</a>
                            </li>
                            <li>
                                <div class="pic">
                                    <a href="">
                                        <img src="images/movie-pic3.webp" alt="">
                                    </a>
                                </div>
                                <div class="title">
                                    <a href="">航海王：狂热行动 ONE PIECE STAMPEDE</a>
                                </div>
                                <div class="rating">
                                    <span class="allstar40"></span>
                                    <i>8.2</i>
                                </div>
                                <a href="" class="link-btn btn-ticket">选座购票</a>
                            </li>
                            <li>
                                <div class="pic">
                                    <a href="">
                                        <img src="images/movie-pic4.webp" alt="">
                                    </a>
                                </div>
                                <div class="title">
                                    <a href="">侠路相逢</a>
                                </div>
                                <div class="rating">
                                    <span class="txt-tip">暂无评分</span>
                                </div>
                                <a href="" class="link-btn btn-ticket">选座购票</a>
                            </li>
                            <li>
                                <div class="pic">
                                    <a href="">
                                        <img src="images/movie-pic1.webp" alt="">
                                    </a>
                                </div>
                                <div class="title">
                                    <a href="">双子杀手</a>
                                </div>
                                <div class="rating">
                                    <span class="allstar35"></span>
                                    <i>6.8</i>
                                </div>
                                <a href="" class="link-btn btn-ticket">选座购票</a>
                            </li>
                            <li>
                                <div class="pic">
                                    <a href="">
                                        <img src="images/movie-pic2.webp" alt="">
                                    </a>
                                </div>
                                <div class="title">
                                    <a href="">我和我的祖国</a>
                                </div>
                                <div class="rating">
                                    <span class="allstar40"></span>
                                    <i>8.0</i>
                                </div>
                                <a href="" class="link-btn btn-ticket">选座购票</a>
                            </li>
                            <li>
                                <div class="pic">
                                    <a href="">
                                        <img src="images/movie-pic3.webp" alt="">
                                    </a>
                                </div>
                                <div class="title">
                                    <a href="">航海王：狂热行动 ONE PIECE STAMPEDE</a>
                                </div>
                                <div class="rating">
                                    <span class="allstar40"></span>
                                    <i>8.2</i>
                                </div>
                                <a href="" class="link-btn btn-ticket">选座购票</a>
                            </li>
                            <li>
                                <div class="pic">
                                    <a href="">
                                        <img src="images/movie-pic4.webp" alt="">
                                    </a>
                                </div>
                                <div class="title">
                                    <a href="">侠路相逢</a>
                                </div>
                                <div class="rating">
                                    <span class="txt-tip">暂无评分</span>
                                </div>
                                <a href="" class="link-btn btn-ticket">选座购票</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!-- 小组 -->
        <div class="section db-group">
            <div class="wrapper clearfix">
                <div class="aside-left">
                    <h2 class="section-title">
                        <a href="">小组</a>
                    </h2>
                    <div class="links-nav">
                        <ul>
                            <li>
                                <a href="">精选</a>
                            </li>
                            <li>
                                <a href="">文化</a>
                            </li>
                            <li>
                                <a href="">行摄</a>
                            </li>
                            <li>
                                <a href="">娱乐</a>
                            </li>
                            <li>
                                <a href="">时尚</a>
                            </li>
                            <li>
                                <a href="">生活</a>
                            </li>
                            <li>
                                <a href="">科技</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="aside-right">
                    <div class="mod">
                        <h3 class="mod-title">小组分类 · · · · · ·</h3>
                        <div class="category group-cate">
                            <ul>
                                <li class="cate-label">
                                    <a href="">兴趣» </a>
                                </li>
                                <li>
                                    <a href="">旅行</a>
                                </li>
                                <li>
                                    <a href="">摄影</a>
                                </li>
                                <li>
                                    <a href="">影视</a>
                                </li>
                                <li>
                                    <a href="">音乐</a>
                                </li>
                                <li>
                                    <a href="">文学</a>
                                </li>
                                <li>
                                    <a href="">游戏</a>
                                </li>
                                <li>
                                    <a href="">动漫</a>
                                </li>
                                <li>
                                    <a href="">运动</a>
                                </li>
                                <li>
                                    <a href="">戏曲</a>
                                </li>
                                <li>
                                    <a href="">桌游</a>
                                </li>
                            </ul>
                        </div>
                        <div class="category group-cate">
                            <ul>
                                <li class="cate-label">
                                    <a href="">生活» </a>
                                </li>
                                <li>
                                    <a href="">健康</a>
                                </li>
                                <li>
                                    <a href="">美食</a>
                                </li>
                                <li>
                                    <a href="">宠物</a>
                                </li>
                                <li>
                                    <a href="">美容</a>
                                </li>
                                <li>
                                    <a href="">化妆</a>
                                </li>
                                <li>
                                    <a href="">护肤</a>
                                </li>
                                <li>
                                    <a href="">服饰</a>
                                </li>
                                <li>
                                    <a href="">公益</a>
                                </li>
                                <li>
                                    <a href="">家庭</a>
                                </li>
                                <li>
                                    <a href="">育儿</a>
                                </li>
                            </ul>
                        </div>
                        <div class="category group-cate">
                            <ul>
                                <li class="cate-label">
                                    <a href="">购物» </a>
                                </li>
                                <li>
                                    <a href="">淘宝</a>
                                </li>
                                <li>
                                    <a href="">二手</a>
                                </li>
                                <li>
                                    <a href="">团购</a>
                                </li>
                                <li>
                                    <a href="">数码</a>
                                </li>
                                <li>
                                    <a href="">品牌</a>
                                </li>
                                <li>
                                    <a href="">文具</a>
                                </li>
                            </ul>
                        </div>
                        <div class="category group-cate">
                            <ul>
                                <li class="cate-label">
                                    <a href="">社会» </a>
                                </li>
                                <li>
                                    <a href="">求职</a>
                                </li>
                                <li>
                                    <a href="">租房</a>
                                </li>
                                <li>
                                    <a href="">励志</a>
                                </li>
                                <li>
                                    <a href="">留学</a>
                                </li>
                                <li>
                                    <a href="">出国</a>
                                </li>
                                <li>
                                    <a href="">理财</a>
                                </li>
                                <li>
                                    <a href="">传媒</a>
                                </li>
                                <li>
                                    <a href="">创业</a>
                                </li>
                                <li>
                                    <a href="">考试</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="main">
                    <h3 class="mod-title">影片分类 · · · · · ·
                        <span>
                                (
                                <a href="" target="_self">更多</a>
                                )
                            </span>
                    </h3>
                    <div class="group-list list">
                        <ul>
                            <li>
                                <div class="pic">
                                    <a href="">
                                        <img src="images/group/group-img1.webp" alt="" width="48">
                                    </a>
                                </div>
                                <div class="info">
                                    <div class="title">
                                        <a href="">帮帮组™加入这个组就有人帮你了！</a>
                                    </div>
                                    <span>16937 个成员</span>
                                </div>
                            </li>
                            <li>
                                <div class="pic">
                                    <a href="">
                                        <img src="images/group/group-img2.webp" alt="" width="48">
                                    </a>
                                </div>
                                <div class="info">
                                    <div class="title">
                                        <a href="">我爱三毛</a>
                                    </div>
                                    <span>47284 个成员</span>
                                </div>
                            </li>
                            <li>
                                <div class="pic">
                                    <a href="">
                                        <img src="images/group/group-img3.jpg" alt="" width="48">
                                    </a>
                                </div>
                                <div class="info">
                                    <div class="title">
                                        <a href="">自己给自己剪头发</a>
                                    </div>
                                    <span>35062 个成员</span>
                                </div>
                            </li>
                            <li>
                                <div class="pic">
                                    <a href="">
                                        <img src="images/group/group-img4.jpg" alt="" width="48">
                                    </a>
                                </div>
                                <div class="info">
                                    <div class="title">
                                        <a href="">我们就是要做衣服给自己穿</a>
                                    </div>
                                    <span>3740 个成员</span>
                                </div>
                            </li>
                            <li>
                                <div class="pic">
                                    <a href="">
                                        <img src="images/group/group-img5.webp" alt="" width="48">
                                    </a>
                                </div>
                                <div class="info">
                                    <div class="title">
                                        <a href="">记事本圆梦小组</a>
                                    </div>
                                    <span>116231 个成员</span>
                                </div>
                            </li>
                            <li>
                                <div class="pic">
                                    <a href="">
                                        <img src="images/group/group-img1.webp" alt="" width="48">
                                    </a>
                                </div>
                                <div class="info">
                                    <div class="title">
                                        <a href="">帮帮组™加入这个组就有人帮你了！</a>
                                    </div>
                                    <span>16937 个成员</span>
                                </div>
                            </li>
                            <li>
                                <div class="pic">
                                    <a href="">
                                        <img src="images/group/group-img2.webp" alt="" width="48">
                                    </a>
                                </div>
                                <div class="info">
                                    <div class="title">
                                        <a href="">我爱三毛</a>
                                    </div>
                                    <span>47284 个成员</span>
                                </div>
                            </li>
                            <li>
                                <div class="pic">
                                    <a href="">
                                        <img src="images/group/group-img3.jpg" alt="" width="48">
                                    </a>
                                </div>
                                <div class="info">
                                    <div class="title">
                                        <a href="">自己给自己剪头发</a>
                                    </div>
                                    <span>35062 个成员</span>
                                </div>
                            </li>
                            <li>
                                <div class="pic">
                                    <a href="">
                                        <img src="images/group/group-img4.jpg" alt="" width="48">
                                    </a>
                                </div>
                                <div class="info">
                                    <div class="title">
                                        <a href="">我们就是要做衣服给自己穿</a>
                                    </div>
                                    <span>3740 个成员</span>
                                </div>
                            </li>
                            <li>
                                <div class="pic">
                                    <a href="">
                                        <img src="images/group/group-img5.webp" alt="" width="48">
                                    </a>
                                </div>
                                <div class="info">
                                    <div class="title">
                                        <a href="">记事本圆梦小组</a>
                                    </div>
                                    <span>116231 个成员</span>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!-- 豆瓣读书 -->
        <div class="section db-book">
            <div class="wrapper clearfix">
                <div class="aside-left">
                    <h2 class="section-title">
                        <a href="">读书</a>
                    </h2>
                    <div class="links-nav">
                        <ul>
                            <li>
                                <a href="">分类浏览</a>
                            </li>
                            <li>
                                <a href="" class="new">阅读</a>
                            </li>
                            <li>
                                <a href="">作者</a>
                            </li>
                            <li>
                                <a href="">书评</a>
                            </li>
                            <li>
                                <a href="">购书单</a>
                            </li>
                        </ul>
                    </div>
                    <div class="app-list">
                        <ul>
                            <li>
                                <a href="" class="app-icon-link">
                                    <i class="app-icon app-icon-read"></i>
                                </a>
                                <a href="">豆瓣阅读</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="aside-right">
                    <div class="mod">
                        <h3 class="mod-title">热门标签 · · · · · ·</h3>
                        <div class="category book-cate first">
                            <ul>
                                <li class="cate-label">[文学]</li>
                                <li>
                                    <a href="">小说</a>
                                </li>
                                <li>
                                    <a href="">随笔</a>
                                </li>
                                <li>
                                    <a href="">日本文学</a>
                                </li>
                                <li>
                                    <a href="">散文</a>
                                </li>
                                <li>
                                    <a href="">诗歌</a>
                                </li>
                                <li>
                                    <a href="">童话</a>
                                </li>
                                <li>
                                    <a href="">名著</a>
                                </li>
                                <li>
                                    <a href="">港台</a>
                                </li>
                                <li>
                                    <a href="">更多</a>
                                </li>
                            </ul>
                        </div>
                        <div class="category book-cate">
                            <ul>
                                <li class="cate-label">[流行]</li>
                                <li>
                                    <a href="">漫画</a>
                                </li>
                                <li>
                                    <a href="">推理</a>
                                </li>
                                <li>
                                    <a href="">绘本</a>
                                </li>
                                <li>
                                    <a href="">青春</a>
                                </li>
                                <li>
                                    <a href="">科幻</a>
                                </li>
                                <li>
                                    <a href="">言情</a>
                                </li>
                                <li>
                                    <a href="">奇幻</a>
                                </li>
                                <li>
                                    <a href="">武侠</a>
                                </li>
                                <li>
                                    <a href="">更多</a>
                                </li>
                            </ul>
                        </div>
                        <div class="category book-cate">
                            <ul>
                                <li class="cate-label">[文化]</li>
                                <li>
                                    <a href="">历史</a>
                                </li>
                                <li>
                                    <a href="">哲学</a>
                                </li>
                                <li>
                                    <a href="">传记</a>
                                </li>
                                <li>
                                    <a href="">设计</a>
                                </li>
                                <li>
                                    <a href="">建筑</a>
                                </li>
                                <li>
                                    <a href="">电影</a>
                                </li>
                                <li>
                                    <a href="">回忆录</a>
                                </li>
                                <li>
                                    <a href="">音乐</a>
                                </li>
                                <li>
                                    <a href="">更多</a>
                                </li>
                            </ul>
                        </div>
                        <div class="category book-cate">
                            <ul>
                                <li class="cate-label">[生活]</li>
                                <li>
                                    <a href="">旅行</a>
                                </li>
                                <li>
                                    <a href="">励志</a>
                                </li>
                                <li>
                                    <a href="">教育</a>
                                </li>
                                <li>
                                    <a href="">职场</a>
                                </li>
                                <li>
                                    <a href="">美食</a>
                                </li>
                                <li>
                                    <a href="">灵修</a>
                                </li>
                                <li>
                                    <a href="">家居</a>
                                </li>
                                <li>
                                    <a href="">更多</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="main">
                    <div class="mod">
                        <h3 class="mod-title">新书速递 · · · · · ·
                            <span>
                                (
                                <a href="" target="_self">更多</a>
                                )
                            </span>
                        </h3>
                        <div class="book-list list">
                            <ul>
                                <li>
                                    <div class="pic">
                                        <a href="">
                                            <img src="images/book-img1.jpg" alt="">
                                        </a>
                                    </div>
                                    <div class="title">
                                        <a href="">大地三部曲</a>
                                    </div>
                                    <div class="author">赛珍珠</div>
                                    <a href="" class="link-btn btn-ticket">免费试读</a>
                                </li>
                                <li>
                                    <div class="pic">
                                        <a href="">
                                            <img src="images/book-img2.jpg" alt="">
                                        </a>
                                    </div>
                                    <div class="title">
                                        <a href="">天命</a>
                                    </div>
                                    <div class="author">[美]理查德·耶茨</div>
                                    <a href="" class="link-btn btn-ticket">免费试读</a>
                                </li>
                                <li>
                                    <div class="pic">
                                        <a href="">
                                            <img src="images/book-img3.jpg" alt="">
                                        </a>
                                    </div>
                                    <div class="title">
                                        <a href="">荒凉山庄</a>
                                    </div>
                                    <div class="author">[英] 查尔斯·狄更斯</div>
                                    <a href="" class="link-btn btn-ticket">免费试读</a>
                                </li>
                                <li>
                                    <div class="pic">
                                        <a href="">
                                            <img src="images/book-img4.jpg" alt="">
                                        </a>
                                    </div>
                                    <div class="title">
                                        <a href="">我心归处是敦煌</a>
                                    </div>
                                    <div class="author">樊锦诗 等</div>
                                    <a href="" class="link-btn btn-ticket">免费试读</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="mod">
                        <h3 class="mod-title">原创数字作品 · · · · · ·
                            <span>
                                (
                                <a href="" target="_self">更多</a>
                                )
                            </span>
                        </h3>
                        <div class="book-list list">
                            <ul>
                                <li>
                                    <div class="pic">
                                        <a href="">
                                            <img src="images/book-img5.jpg" alt="">
                                        </a>
                                    </div>
                                    <div class="title">
                                        <a href="">女人往事</a>
                                    </div>
                                    <div class="price">免费</div>
                                    <a href="" class="link-btn btn-ticket">免费试读</a>
                                </li>
                                <li>
                                    <div class="pic">
                                        <a href="">
                                            <img src="images/book-img6.jpg" alt="">
                                        </a>
                                    </div>
                                    <div class="title">
                                        <a href="">古董珍珑劫</a>
                                    </div>
                                    <div class="price">7.13元</div>
                                    <a href="" class="link-btn btn-ticket">免费试读</a>
                                </li>
                                <li>
                                    <div class="pic">
                                        <a href="">
                                            <img src="images/book-img7.jpg" alt="">
                                        </a>
                                    </div>
                                    <div class="title">
                                        <a href="">庭外有远山</a>
                                    </div>
                                    <div class="price">5.20元</div>
                                    <a href="" class="link-btn btn-ticket">免费试读</a>
                                </li>
                                <li>
                                    <div class="pic">
                                        <a href="">
                                            <img src="images/book-img8.jpg" alt="">
                                        </a>
                                    </div>
                                    <div class="title">
                                        <a href="">浮游：无尽下坠的女人</a>
                                    </div>
                                    <div class="price">免费</div>
                                    <a href="" class="link-btn btn-ticket">免费试读</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <!-- 豆瓣音乐 -->
        <div class="section db-music">
            <div class="wrapper clearfix">
                <div class="aside-left">
                    <h2 class="section-title">
                        <a href="">音乐</a>
                    </h2>
                    <div class="links-nav">
                        <ul>
                            <li>
                                <a href="">音乐人</a>
                            </li>
                            <li>
                                <a href="">潮潮豆瓣音乐周</a>
                            </li>
                            <li>
                                <a href="">金羊毛计划</a>
                            </li>
                            <li>
                                <a href="">专题</a>
                            </li>
                            <li>
                                <a href="">排行榜</a>
                            </li>
                            <li>
                                <a href="">分类浏览</a>
                            </li>
                            <li>
                                <a href="">乐评</a>
                            </li>
                            <li>
                                <a href="">豆瓣FM</a>
                            </li>
                            <li>
                                <a href="">歌单</a>
                            </li>
                            <li>
                                <a href="">阿比鹿音乐奖</a>
                            </li>
                        </ul>
                    </div>
                    <div class="app-list">
                        <ul>
                            <li>
                                <a href="" class="app-icon-link">
                                    <i class="app-icon app-icon-fm"></i>
                                </a>
                                <a href="">豆瓣FM</a>
                            </li>
                            <li>
                                <a href="" class="app-icon-link">
                                    <i class="app-icon app-icon-artists"></i>
                                </a>
                                <a href="">豆瓣音乐人</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="aside-right">
                    <div class="mod">
                        <h3 class="mod-title">热门标签 · · · · · ·
                            <span>
                                (
                                <a href="" target="_self">更多</a>
                                )
                            </span>
                        </h3>
                        <div class="artist-charts">
                            <ul>
                                <li>
                                    <sapn class="num">1.</sapn>
                                    <div class="pic">
                                        <a href="">
                                            <img src="images/artist-pic1.jpg" alt="">
                                        </a>
                                        <i class="icon icon-bg"></i>
                                        <i class="icon icon-play"></i>
                                    </div>
                                    <div class="info">
                                        <a href="">不休</a>
                                        <div class="describe">
                                            流派: 民谣 Folk
                                            <br>
                                            389人关注
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <sapn class="num">2.</sapn>
                                    <div class="pic">
                                        <a href="">
                                            <img src="images/artist-pic1.jpg" alt="">
                                        </a>
                                        <i class="icon icon-bg"></i>
                                        <i class="icon icon-play"></i>
                                    </div>
                                    <div class="info">
                                        <a href="">不休</a>
                                        <div class="describe">
                                            流派: 民谣 Folk
                                            <br>
                                            389人关注
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <sapn class="num">3.</sapn>
                                    <div class="pic">
                                        <a href="">
                                            <img src="images/artist-pic1.jpg" alt="">
                                        </a>
                                        <i class="icon icon-bg"></i>
                                        <i class="icon icon-play"></i>
                                    </div>
                                    <div class="info">
                                        <a href="">不休</a>
                                        <div class="describe">
                                            流派: 民谣 Folk
                                            <br>
                                            389人关注
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <sapn class="num">4.</sapn>
                                    <div class="pic">
                                        <a href="">
                                            <img src="images/artist-pic1.jpg" alt="">
                                        </a>
                                        <i class="icon icon-bg"></i>
                                        <i class="icon icon-play"></i>
                                    </div>
                                    <div class="info">
                                        <a href="">不休</a>
                                        <div class="describe">
                                            流派: 民谣 Folk
                                            <br>
                                            389人关注
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <sapn class="num">5.</sapn>
                                    <div class="pic">
                                        <a href="">
                                            <img src="images/artist-pic1.jpg" alt="">
                                        </a>
                                        <i class="icon icon-bg"></i>
                                        <i class="icon icon-play"></i>
                                    </div>
                                    <div class="info">
                                        <a href="">不休</a>
                                        <div class="describe">
                                            流派: 民谣 Folk
                                            <br>
                                            389人关注
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="main">
                    <div class="mod">
                        <h3 class="mod-title">豆瓣新碟榜 · · · · · ·
                            <span>
                                (
                                <a href="" target="_self">更多</a>
                                )
                            </span>
                        </h3>
                        <div class="album-list list">
                            <ul>
                                        <li>
                                            <div class="pic">
                                                <a href="">
                                                    <img src="images/music-img1.jpg" alt="">
                                                </a>
                                            </div>
                                            <div class="title">1.
                                                <a href="">太空人</a>
                                            </div>
                                            <div class="artists">
                                                <a href="">吴青峰 Greeny Wu</a>
                                            </div>
                                            <div class="rating">
                                                <span class="allstar40"></span>
                                                <i>8.0</i>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="pic">
                                                <a href="">
                                                    <img src="images/music-img2.jpg" alt="">
                                                </a>
                                            </div>
                                            <div class="title">2.
                                                <a href="">群星闪耀时</a>
                                            </div>
                                            <div class="artists">
                                                <a href="">盘尼西林</a>
                                            </div>
                                            <div class="rating">
                                                <span class="allstar35"></span>
                                                <i>6.4</i>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="pic">
                                                <a href="">
                                                    <img src="images/music-img3.jpg" alt="">
                                                </a>
                                            </div>
                                            <div class="title">3.
                                                <a href="">All Mirrors</a>
                                            </div>
                                            <div class="artists">
                                                <a href="">Angel Olsen</a>
                                            </div>
                                            <div class="rating">
                                                <span class="allstar40"></span>
                                                <i>8.1</i>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="pic">
                                                <a href="">
                                                    <img src="images/music-img4.jpg" alt="">
                                                </a>
                                            </div>
                                            <div class="title">4.
                                                <a href="">SuperM-The 1st Mini Album</a>
                                            </div>
                                            <div class="artists">
                                                <a href="">SuperM</a>
                                            </div>
                                            <div class="rating">
                                                <span class="allstar35"></span>
                                                <i>6.2</i>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="pic">
                                                <a href="">
                                                    <img src="images/music-img1.jpg" alt="">
                                                </a>
                                            </div>
                                            <div class="title">5.
                                                <a href="">太空人</a>
                                            </div>
                                            <div class="artists">
                                                <a href="">吴青峰 Greeny Wu</a>
                                            </div>
                                            <div class="rating">
                                                <span class="allstar40"></span>
                                                <i>8.0</i>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="pic">
                                                <a href="">
                                                    <img src="images/music-img2.jpg" alt="">
                                                </a>
                                            </div>
                                            <div class="title">6.
                                                <a href="">群星闪耀时</a>
                                            </div>
                                            <div class="artists">
                                                <a href="">盘尼西林</a>
                                            </div>
                                            <div class="rating">
                                                <span class="allstar35"></span>
                                                <i>6.4</i>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="pic">
                                                <a href="">
                                                    <img src="images/music-img3.jpg" alt="">
                                                </a>
                                            </div>
                                            <div class="title">7.
                                                <a href="">All Mirrors</a>
                                            </div>
                                            <div class="artists">
                                                <a href="">Angel Olsen</a>
                                            </div>
                                            <div class="rating">
                                                <span class="allstar40"></span>
                                                <i>8.1</i>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="pic">
                                                <a href="">
                                                    <img src="images/music-img4.jpg" alt="">
                                                </a>
                                            </div>
                                            <div class="title">8.
                                                <a href="">SuperM-The 1st Mini Album</a>
                                            </div>
                                            <div class="artists">
                                                <a href="">SuperM</a>
                                            </div>
                                            <div class="rating">
                                                <span class="allstar35"></span>
                                                <i>6.2</i>
                                            </div>
                                        </li>
                                    </ul>
                        </div>
                    </div>
                    <div class="mod">
                        <h3 class="mod-title">热门歌单 · · · · · ·
                            <span>
                                (
                                <a href="" target="_self">更多</a>
                                )
                            </span>
                        </h3>
                        <div class="programme-list list">
                            <ul>
                                <li>
                                    <div class="pic">
                                        <a href="">
                                            <img src="images/programme-img1.jpg" alt="">
                                        </a>
                                    </div>
                                    <div class="title">【英文经典】中国人民的老朋友们</div>
                                </li>
                                <li>
                                    <div class="pic">
                                        <a href="">
                                            <img src="images/programme-img1.jpg" alt="">
                                        </a>
                                    </div>
                                    <div class="title">【英文经典】中国人民的老朋友们</div>
                                </li>
                                <li>
                                    <div class="pic">
                                        <a href="">
                                            <img src="images/programme-img1.jpg" alt="">
                                        </a>
                                    </div>
                                    <div class="title">【英文经典】中国人民的老朋友们</div>
                                </li>
                                <li>
                                    <div class="pic">
                                        <a href="">
                                            <img src="images/programme-img1.jpg" alt="">
                                        </a>
                                    </div>
                                    <div class="title">【英文经典】中国人民的老朋友们</div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="wrapper">
        <div class="footer clearfix">
            <div class="ft-left">
                    © 2005－2019 douban.com, all rights reserved 北京豆网科技有限公司
                <br>
                <a href="">京ICP证090015号</a> 京ICP备11027288号 网络视听许可证<a href="" target="_blank">0110418</a>号
                <br>
                京网文[2015]2026-368号
                <img src="images/biaoshi.gif" alt="">
                <a href="">京公网安备11010502000728</a>  新出网证(京)字129号
                <br>
                违法和不良信息举报电话：4008353331-9
                <br>
                <img src="images/jubao.png" alt="" width="15">
                <a href="">中国互联网举报中心</a>
                电话：12377 <a href="">新出发京批字第直160029号</a>
            </div>
            <div class="ft-right">
                <a href="">关于豆瓣</a>
                ·
                <a href="">在豆瓣工作</a>
                ·
                <a href="">联系我们</a>
                ·
                <a href="">法律声明</a>
                ·
                <a href="">帮助中心</a>
                ·
                <a href="">移动应用</a>
                ·
                <a href="">豆瓣广告</a>
                <a href="" class="report">
                    <img src="images/file-report.jpg" alt="">
                </a>
            </div>
        </div>
    </div>

    <script src="js/jquery-1.12.4.js"></script>
    <script src="js/login.js"></script>
</body>
</html>